{extend name="common/base"/}
{block name="style"}
<link rel="stylesheet" href="{__STATIC__}/home/style/login.css?v={$version}">
{/block}
{block name="title"}
<title>注册-{$conf.title|default=''}</title>	
{/block}
{block name="body"}
{include file="common/header" nav='index' /}
{php}$power = get_system_config('power');{/php}
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>{$conf.title|default=''}注册</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <div class="layui-form login-bottom">
            {if !empty($power['register_open'])}
                <div class="center">
                    <div class="item">
                        <span class="icon icon-2"></span>
                        <input type="text" name="username" lay-verify="required" placeholder="请输入注册账号" maxlength="24">
                    </div>
                    <div class="item">
                        <span class="icon icon-2"></span>
                        <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" maxlength="24">
                    </div>
                    <div class="item">
                        <span class="icon icon-3"></span>
                        <input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
                        <span class="bind-password icon icon-4"></span>
                    </div>
                    <div class="item">
                        <span class="icon icon-3"></span>
                        <input type="password" name="confirmPassword" lay-verify="required" placeholder="确认密码" maxlength="20">
                        <span class="bind-password icon icon-4"></span>
                    </div>
                    <div class="item" style="width: 137px;">
                        <span class="icon icon-7"></span>
                        <input type="text" name="captcha" placeholder="请输入验证码" maxlength="6">
                        <img id="refreshCaptcha" class="validateImg" src="{:furl('v1/captcha', [], true, 'api')}" onclick="this.src='{:furl('v1/captcha', [], true, 'api')}?seed='+Math.random()">
                    </div>
                    <div class="tip">
                        <input type="checkbox" name="agree" lay-skin="primary" title="同意" lay-filter="agree">   
                        <span class="agreement">《用户协议》</span><span class="privacy">《隐私政策》</span>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                    <button class="login-btn" lay-submit="" lay-filter="register">立即注册</button>
                </div>
            {else/}
                <div class="center" style="font-size: 20px; color: #000;text-align: center;"><i class="layui-icon layui-icon-face-surprised" style="font-size: 20px;"></i> 禁止注册</div>
            {/if}
            <div class="layui-form-item bottom-other">
                <a href="{:url('login')}">已有账号？<span>前往登录</span></a>
            </div>
        </div>
    </div>
</div>
{php}
$agreement = model('pages')->where(['status' => 1, 'name' => 'agreement'])->value('content');
$privacy = model('pages')->where(['status' => 1, 'name' => 'privacy'])->value('content');
{/php}
{/block}
{block name="script"}
<script>
    $(window).on('load', function () {
        {if !empty($power['register_open'])}
        var refererUrl = "{:url('login')}";
        layui.use(['form', 'jquery'], function () {
            var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;            
            var agree = false;
            form.on('checkbox(agree)', function(data) {
                if(data.elem.checked){
                    agree = true;
                } else {
                    agree = false;
                }
            });
            form.on('submit(register)', function (data) {
                data = data.field;
                if(!agree) {
                    layer.msg('请先同意相关协议');
                    return false;
                }
                if (data.username == '') {
                    layer.msg('用户名不能为空');
                    return false;
                }
                if (data.nickname == '') {
                    layer.msg('昵称不能为空');
                    return false;
                }
                if (data.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (data.confirmPassword == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (data.password != data.confirmPassword) {
                    layer.msg('两次密码不一致');
                    return false;
                }
                if (data.captcha == '') {
                    layer.msg('验证码不能为空');
                    return false;
                }
                let layerIndex = layer.load();
                var invite_code = $.getCookie(sessioninvitename);
                var postData = {"username": data.username, "nickname": data.nickname, "password": data.password, "confirmPassword": data.confirmPassword,"captcha": data.captcha, "invite_code": invite_code};
                $.postApi("{:furl('v1/register', [], true, 'api')}", postData, function(result) {
                    layer.close(layerIndex);
                    layer.msg(result.msg);
                    if(parseInt(result.code) == 0) {                       
                        window.location.href = refererUrl;
                    } else {
                        $('#refreshCaptcha').attr("src", "{:furl('v1/captcha', [], true, 'api')}" + "?" + Math.random());
                    }
                });                
            });
            return false;
        });
        $('.bind-password').on('click', function () {            
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });
        $('.agreement').on('click', function () {
            layer.open({
                type: 1,
                area: ['80%', '50%'],
                title: '用户协议',
                shade: 0.6,
                shadeClose: false,
                maxmin: false,
                btnAlign: 'c',
                closeBtn: 0,
                anim: 0,
                content: `<div class="login_agreement">{$agreement|raw}</div>`,
                btn: ['确定', '关闭'],
                btn1: function(index, layero, that) {
                    layer.close(index);
                },
                btn2: function(index, layero, that) {
                    layer.close(index);
                },
            });
        })        
        $('.privacy').on('click', function () {
            layer.open({
                type: 1,
                area: ['80%', '50%'],
                title: '隐私政策',
                shade: 0.6,
                shadeClose: false,
                maxmin: false,
                btnAlign: 'c',
                closeBtn: 0,
                anim: 0,
                content: `<div class="login_agreement">{$privacy|raw}</div>`,
                btn: ['确定', '关闭'],
                btn1: function(index, layero, that) {
                    layer.close(index);
                },
                btn2: function(index, layero, that) {
                    layer.close(index);
                },
            });
        })        
        {/if}
    });
</script>
{/block}